<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import resize from '@/mixins/resize'
import { randomNum } from '@/utils/randomNum'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'knowledge-graph'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    mete: {
      type: Object,
      default: () => {
        return {
          url: 'https://theblogimage.oss-cn-fuzhou.aliyuncs.com/imagefortypora/high%20temperature.jpg',
          name: '高温',
          desc: '高温天气指温度较长时间保持在较高水平的气候现象，通常会出现在夏季。当温度达到一定程度时，会对人们的健康和日常生活造成一定的影响。',
          effect:
            '高温天气的规模通常涉及较大区域，例如整个地区或多个城市。高温天气可以导致人们体内失水过多，引起中暑等健康问题；对于年老体弱的人、儿童、孕妇和病患人群来说，高温天气的影响更为严重。此外，在农业方面，高温天气会加速作物的生长进程，同时也增加了干旱和火灾等自然灾害的发生几率；在工业领域，高温天气对电力供应和交通运输也可能造成一定的影响。',
          measure:
            '为了应对高温天气，需要采取一系列措施。应当加强预警和信息发布，提醒公众避免在高温时段长时间户外活动和暴晒，同时加强对易受高温天气影响的人群的照料和帮助。公众应自觉减少户外活动，适当调整作息时间，增加补水和防暑降温措施。农业部门可以采用遮荫、喷灌等方式对农作物进行保护；工业企业需要确保设备安全运行，适当调整生产计划，以保障供电和交通等基础设施的正常运营。',
          wordCloud: [
            '高温',
            '天气',
            '炎热',
            '酷暑',
            '炎夏',
            '热浪',
            '热量',
            '防晒',
            '温度',
            '炙烤',
            '灼热',
            '汗水',
            '空调',
            '古井不波',
            '皮肤',
            '暑假',
            '温暖',
            '夏季',
            '气温',
            '凉爽'
          ]
        }
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    mete: {
      deep: true,
      handler() {
        this.initChart()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$el)
      const colorList = [
        'rgba(6, 109, 183, 1)',
        'rgba(6, 109, 183, .9)',
        'rgba(6, 109, 183, .8)',
        'rgba(6, 109, 183, .7)',
        'rgba(6, 109, 183, .6)',
        'rgba(6, 109, 183, .5)',
        'rgba(6, 109, 183, .4)',
        'rgba(6, 109, 183, .3)',
        'rgba(109, 202, 243, .9)',
        'rgba(109, 202, 243, .7)',
        'rgba(109, 202, 243, .5)',
        'rgba(109, 202, 243, .3)',
        'rgba(109, 202, 243, .2)'
      ]

      const s = Number(this.width.replace('px', ''))
      const min = parseInt(s / 10)
      const max = parseInt(s / 7)
      const zoom = Number(s / 366)
      const dataList = []
      const titleName = this.mete.name

      this.mete.wordCloud.forEach((v) => {
        const num = randomNum(0, colorList.length - 1)
        dataList.push({
          name: v,
          value: randomNum(40, 2000),
          symbolSize: randomNum(min, max),
          draggable: true,
          itemStyle: {
            normal: {
              shadowColor: colorList[num],
              color: colorList[num]
            }
          }
        })
      })

      this.chart.setOption({
        // 图表标题
        title: {
          text: `${titleName}词云统计`,
          show: true,
          x: 'center',
          y: 'top',
          borderColor: '#ccc',
          borderWidth: 0,
          padding: 5,
          itemGap: 10,
          textStyle: {
            fontSize: 18,
            fontWeight: 'bolder',
            color: '#fff'
          }
        },
        animationDurationUpdate: function (idx) {
          return idx * 100
        },
        animationEasingUpdate: 'bounceIn',
        color: ['#fff', '#fff', '#fff'],
        series: [
          {
            type: 'graph',
            layout: 'force',
            zoom,
            force: {
              repulsion: 60,
              edgeLength: 10
            },
            roam: false,
            label: {
              normal: {
                show: true
              }
            },
            data: dataList
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.knowledge-graph {
  height: 100%;
}
</style>
